<template>
	<view class="body">
		<button @click="myfriend" class="myfriend">好友</button>
		<view class="cover-container" v-if="firendSh">
			<view class="flid"  @touchstart="findTouch" @touchend="findtouchend" v-for="(item,index) in firends" :key="index">
				<image :src="item.img"></image>
				<view>{{item.name}}</view>
			</view>
			
			
		</view>
		<button @click="groupchat" class="groupchat">群聊</button>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	
		
	</view>
</template>

<script>
	import listCell from '../../components/mix-list-cell';
	var _this;
	export default {
		components: {
			listCell
		},
		data() {
			return {
					 firends:[
						 {
							 img:'../../static/guide/icon_03.png',
						     name:'名称1'
						 },
						 {
						 	img:'../../static/guide/icon_03.png',
						     name:'名称2'
						 },
						 {
						 	img:'../../static/guide/icon_03.png',
						     name:'名称3'
						 },
						 {
						 	img:'../../static/guide/icon_03.png',
						     name:'名称4'
						 }
					 ],
				     groupchars:[],
					 findTouchVal:false,
					 firendSh:true
				}
		},
		onLoad() {
			_this=this;
	
		},
		onNavigationBarButtonTap(e) {
			console.log("success")
			 uni.switchTab({url:'../index/index'});
		},
		methods: {
			myfriend:function(){
				this.firendSh= this.firendSh?false:true;
			},			
		    groupchat:function(){
				
			},
			findTouch:function(){
				_this.findTouchVal=true;
				console.log(_this.findTouchVal)
			},
			findtouchend:function(){
				_this.findTouchVal=false;
					console.log(_this.findTouchVal)
			}
		}
	}
	
	
</script>

<style>
	.bcolor{
		background-color: white;
	}
	.myfriend{
		margin-top: 10rpx;
	}
	.groupchat{
		margin-top: 10rpx;
	}
	.cover-container{
		width: 100%;
	}
	.flid{
		padding-top: 20rpx;
		padding-left: 4%;
	}
	.flid>image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		/* border: 1px solid red; */
		
	}
	.flid>view{
		display: inline-block;
        padding-left: 6%;
        position: relative;
        top: -32rpx;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.swiperMain{ width: 100%; }
		.swiperHead{
			/* position: fixed; */
			/* top: 0; */
			z-index: 10;
			width: 100%;
			background: #FFFFFF;
			
		}
		.swiperHead scroll-view{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			white-space: nowrap;
		}
		.swiperTab{
			display: inline-flex;
			flex-direction: column;
			text-align: center;
		}
		.swiperCont{ width: 100%; height: 100%;}
		
		 /* #ifdef H5 */
		 .swiperHead{
		 /* 	position: fixed;
		 	top: 44px; */
		 	z-index: 10;
		 	width: 100%;
		 	background: #FFFFFF;
		 }
		 /* #endif */
		
		.swiper{ width: 100%;height: 100%; }
		.swiperItem{
			height: 100%;
			/* text-align: center; */
			color: #000000;
			/* line-height: 400rpx; */
			font-size: 30upx;
			 }
		.swiperItem image{ width: 100%;height: 100%;display: block; }
	
	
	
</style>
